<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button
          type="primary"
          :disabled="!isOpenAccount"
          :class="!isOpenAccount ? 'disabled_button' : ''"
          @click="onShowAdd"
        >新增账户</el-button>
        <el-button
          :disabled="!isOpenAccount"
          :class="!isOpenAccount ? 'disabled_button' : ''"
          @click="onSave"
        >保存</el-button>
      </div>
      <div class="btn_right">
        <el-input v-model="queryData.queryParam" placeholder="请输入账户名称\拼音码"></el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="onRefresh">刷新</el-button>
        <i @click="onShowColumn" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_tree" :class="editTreeDataSta == false ? 'new_div_tree_width' : ''">
        <div class="tree_div1">
          <p>账户类别</p>
          <p v-if="editTreeDataSta && isOpenAccount" @click="editTreeDataSta = false">编辑</p>
          <el-button v-else-if="isOpenAccount" type="primary" @click="editTreeDataSta = true">完成编辑</el-button>
          <p v-else></p>
        </div>
        <div class="tree_input">
          <p>
            <input type="text" placeholder="查找" v-model="filterText" />
            <span>
              <i class="el-icon-search"></i>
            </span>
          </p>
        </div>
        <div class="tree_structure">
          <el-tree
            ref="tree"
            :data="treeData"
            node-key="label"
            :props="defaultProps"
            highlight-current
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
          >
            <span v-if="editTreeDataSta == false" class="tree_node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span v-if="nowLabel == data.id" class="show_nodex">
                <i class="el-icon-circle-plus-outline" @click.stop="onAddTree(data)"></i>
                <i
                  v-if="data.id !== ''"
                  class="el-icon-edit-outline"
                  @click.stop="onEditTree(node, data)"
                ></i>
                <i v-if="data.id !== ''" class="el-icon-delete" @click.stop="onDeleteTree(data)"></i>
              </span>
            </span>
            <span v-else class="tree_node" slot-scope="{ node }">
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="div_table" :class="editTreeDataSta == false ? 'new_div_table_width' : ''">
        <div class="table_content">
          <el-table
            ref="tableRef"
            :data="newData"
            height="100%"
            border
            tooltip-effect="dark"
            highlight-current-row
            :header-cell-style="{ background: '#EDEDED', color: '#666666', textAlign: 'center' }"
            @selection-change="handleSelectionChange"
            @row-click="onClickTable"
            show-summary
            :summary-method="getSummaries"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column :resizable="false" label="序号" type="index" width="50"></el-table-column>
            <el-table-column label="操作" :resizable="false" width="80px" v-if="isOpenAccount">
              <template slot-scope="scope">
                <i @click="onEditRow(scope.row)" class="el-icon-edit-outline"></i>
                <i @click="onDeleteRow(scope.row)" class="el-icon-delete"></i>
              </template>
            </el-table-column>
            <template v-for="(item, i) in columnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="i"
                :prop="item.props"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                v-if="item.zidingyiState"
                :width="item.cellWidth"
              >
                <template slot-scope="scope">
                  <div class="index_input" style="padding: 0 5px;">
                    <input
                      v-if="item.props == 'initialBalanceShow' && isOpenAccount"
                      @blur="handleBalance(scope.row)"
                      @input="inputMoney(item.props, scope.row)"
                      v-model="scope.row[item.props]"
                    />
                    <el-tooltip
                      v-else-if="item.props == 'remark' && isOpenAccount"
                      :content="scope.row[item.props]"
                      placement="top"
                      :disabled="!scope.row[item.props]"
                    >
                      <input v-model="scope.row[item.props]" />
                    </el-tooltip>
                    <div v-else-if="item.props == 'remark'">
                      <el-tooltip
                        :content="scope.row[item.props]"
                        placement="top"
                        :disabled="!scope.row[item.props]"
                      >{{ scope.row[item.props] }}</el-tooltip>
                    </div>
                    <div v-else>{{ scope.row[item.props] }}</div>
                  </div>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
        <div class="table_pagination">
          <div class="pagination_div">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="pagesize"
              layout="jumper, prev, pager,next, sizes"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      class="dialog_account"
      title="新增账户"
      :visible.sync="dialogVisible"
      lock-scroll
      width="60%"
    >
      <div class="dialog_div_new">
        <div class="dialog_middle">
          <div class="input_line">
            <div class="line_item">
              <div style="width: 80px; display: flex">
                <div class="title">账户名称</div>
                <span class="star">*</span>
              </div>
              <input
                type="text"
                ref="nameRef"
                @focusout="getNameToPinying"
                v-model="ruleForm.bankName"
              />
            </div>
            <div class="line_item">
              <div style="width: 80px; display: flex">
                <div class="title">账户类别</div>
                <span class="star">*</span>
              </div>
              <el-select v-model="ruleForm.bankType">
                <el-option
                  v-for="item in zhlbOptions"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="input_line">
            <div class="line_item">
              <div style="width: 80px; display: flex">
                <div class="title">开户银行</div>
              </div>
              <input type="text" v-model="ruleForm.openBank" />
            </div>
            <div class="line_item">
              <div style="width: 80px; display: flex">
                <div class="title">开户名</div>
              </div>
              <input type="text" v-model="ruleForm.openMan" />
            </div>
          </div>

          <div class="input_line">
            <div class="line_item">
              <div style="width: 80px; display: flex">
                <div class="title">账号</div>
              </div>
              <input type="text" v-model="ruleForm.account" />
            </div>
            <div class="line_item">
              <div style="width: 80px; display: flex">
                <div class="title">币种</div>
              </div>
              <j-dict-select-tag
                type="select"
                dictCode="currency_type"
                style="flex: 1"
                v-model="ruleForm.moneyType"
                placeholder="请选择币种符号"
              ></j-dict-select-tag>
            </div>
          </div>

          <div class="input_line">
            <div class="line_item">
              <div style="width: 80px; display: flex">
                <div class="title">拼音码</div>
              </div>
              <input type="text" v-model="ruleForm.helpCode" />
            </div>
            <div class="line_item">
              <div style="width: 80px; display: flex">
                <div class="title">默认账户</div>
              </div>
              <el-checkbox v-model="ruleForm.defaultFlag"></el-checkbox>
            </div>
          </div>
        </div>
        <div class="dialog_bottom">
          <el-button type="primary" @click.stop="onSubmit">保存</el-button>
          <el-button @click.stop="dialogVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 列配置弹框 -->
    <CConfiguration
      ref="setColumnRef"
      :columnDataArr="columnData"
      :defaultColumnDataArr="defaultColumnData"
      orderType="期初账户余额录入"
      @onSaveColumn="onSaveColumn"
    ></CConfiguration>
    <!-- 提醒弹框 -->
    <PopupReminder
      ref="reminderRef"
      :tipsData="tipsData"
      @dialogVisibleClose="onNo"
      @onConfirm="onYes"
    ></PopupReminder>
    <!-- 导入 -->
    <DialogImport
      ref="daoru"
      :titles="columnData"
      url="/xghBank/xghBank/importExcel"
      @importData="importData"
      @downloadTemplate="exportExcel"
    ></DialogImport>
    <!-- 新增树形结构数据弹框 -->
    <el-dialog title="类别信息" :visible.sync="showNewTree" width="480px">
      <NewCategory
        :newTreeData="newTreeData"
        @onSaveTreeChanges="onSaveTreeChanges"
        @onCancelTree="showNewTree = false"
      ></NewCategory>
    </el-dialog>
  </div>
</template>
<script>
import PopupReminder from '@/views/components/popupReminder'
import { mapGetters } from 'vuex'
import { getAction, deleteAction, postAction, putAction, downPostFile } from '@/api/manage'
import CConfiguration from '@/components/c_column/columnConfiguration1'
import NewCategory from '@/components/c_category/NewCategory'
import DialogImport from '@/components/c_Import/index1'
// 导入调用处理权限数据方法
import { handlePermissions, handleOtherPerms, formatMoney, formatPrice, formatFour, delcommafy, getTreeDataByMap } from '@/utils/index'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { ACCESS_TOKEN, TENANT_ID, ACCOUNT_BOOK } from '@/store/mutation-types'
import Vue from 'vue'
export default {
  name: 'accountBalanceEntry',
  components: {
    CConfiguration,
    NewCategory,
    PopupReminder,
    DialogImport,
  },
  mixins: [JeecgListMixin],
  computed: {
    ...mapGetters(['name']),
  },
  created () {
    let accountBook = Vue.ls.get(ACCOUNT_BOOK)
    this.accountBookId = accountBook && accountBook.id
    // this.accountBalancePermissions = handlePermissions('账户信息')
    this.getInitialInventory() // 获取数据
    this.getTreeData()
  },
  updated () {
    this.$nextTick(() => {
      this.$refs.tableRef.doLayout()
    })
  },
  data () {
    return {
      // 存储按钮权限数据
      buttonsPermissions: {},
      accountBalancePermissions: {},
      // 每一行的id，默认为空
      rowId: null,
      total: 0, // 总数
      status: 0, // 状态
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      dialogVisible: false, // 新增弹框
      // 传递数据给新增树形结构组件
      newTreeData: {
        parentNode: '',
        nowNode: '',
      },
      // 账户类型
      ruleForm: {
        bankName: '',
        bankType: '',
        openBank: '',
        openMan: '',
        account: '',
        moneyType: '',
        helpCode: '',
        defaultFlag: false,
      },
      zhlbOptions: [
        {
          value: '1',
          label: '现金',
        },
        {
          value: '2',
          label: '银行账户',
        },
        {
          value: '3',
          label: '虚拟账户',
        },
      ],
      newData: [],
      // 列配置数据
      defaultColumnData: [],
      columnData: [
        {
          morenName: '账户名称',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '200px',
          props: 'bankName',
        },
        {
          morenName: '账户类别',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '300px',
          props: 'bankType_dictText',
        },
        {
          morenName: '期初余额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '300px',
          props: 'initialBalanceShow',
        },
        {
          morenName: '备注',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '500px',
          props: 'remark',
        },
      ],
      biaoshi: 1, // 表示
      importValue: '导入',
      enableOptions: [
        {
          value: true,
          label: '批量启用',
        },
        {
          value: false,
          label: '批量禁用',
        },
      ],
      enableValue: '批量',
      treeData: [
        {
          label: '全部',
          bankType: 0,
          children: [
            {
              label: '现金',
              bankType: 1,
            },
            {
              label: '银行账户',
              bankType: 2,
            },
            {
              label: '虚拟账户',
              bankType: 3,
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'typeName',
      },
      nowLabel: '',
      editTreeDataSta: true, // 编辑账户类别状态（目前不能编辑）
      batchData: [], // 存储多选的数据
      rowVal: {}, // 每一行的数据
      tipsData: {
        // 弹框数据
        tipsWords: '',
        tipsMark: '',
      },
      checkboxStatus: false,
      // 搜索
      queryData: {
        queryParam: '',
      },
      newBankType: '', // 新增的账号类型
      isOpenAccount: false, // 开账后不能修改
      updateId: '', // 修改列配置时返回的id
      url: {
        bankList: '/xghBank/xghBank/list',
        api: '期初账户余额录入',
        exportXlsUrl: '/xghBank/xghBank/exportXls'
      },
      accountBookId: '',
      showNewTree: false,
      filterText: '',
      moneyLength: 2,
    }
  },
  watch: {
    checkboxStatus: {
      deep: true,
      handler () {
        this.getInitialInventory()
      },
    },
    filterText (val) {
      this.$refs.tree.filter(val)
    },
    dialogVisible (val) {
      if(!val) {
        this.ruleForm = this.$options.data().ruleForm
      }
    },
    tableData: {
      immediate: true,
      handler () {
        setTimeout(() => {
          const table = document.querySelector('.el-table__footer-wrapper>table')
          let tds = table.rows[0].cells
          tds[1].colSpan = 2
          tds[2].style.display = 'none'
          let cell = tds[1].childNodes[0]
          cell.style.justifyContent = 'flex-start'
          cell.style.paddingLeft = '5px'
        }, 0);
      }
    },
    // 路由变化时，更新数据
    $route: {
      immediate: true,
      handler(val) {
        if (val.name === 'baseInfomation-beginningOfPeriod-accountBalanceEntry') {
          // 获取开账方式
          this.getOpenAccountFlag()
        }
      },
    },
  },
  mounted () {
    // 初始化列配置数据
    this.defaultColumnData = JSON.parse(JSON.stringify(this.columnData))
    this.selectTitle()
    let unititem = this.$lcStorage.get('toFixedList')
    if (unititem) {
      this.moneyLength = unititem.allPrice
    }
  },
  methods: {
    // 初始化查询列配置值
    async selectTitle () {
      let obj = await this.$setColumn.selectColumn(this.url.api)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.url.api, this.$options.data().columnData)
        this.updateId = id
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn (value) {
      this.columnData = value
      let res = await this.$setColumn.editColumn(this.url.api, this.columnData, this.updateId)
      if (res.code == 200) {
        this.showTips(res.message, 0)
      } else {
        this.showTips(res.message, 2)
      }
    },
    // 批量启用禁用数据
    onBatchChangeStatus (val) {
      val = val == true ? '批量启用' : '批量禁用'
      if (this.batchData.length) {
        this.nowStatus = val
        this.tipsData.tipsWords = '是否' + val + '?'
        this.tipsData.tipsMark = 'onBatchChangeStatus'
        this.$refs.reminderRef.dialogVisible = true
      } else {
        this.showTips('请先选择需要' + val + '的数据！', 2)
      }
      this.enableValue = '批量'
    },
    // 是否取消
    isShow () {
      this.tipsData.tipsWords = '是否确认取消'
      this.tipsData.tipsMark = 'isShow'
      this.$refs.reminderRef.dialogVisible = true
    },
    // 刷新
    onRefresh () {
      Object.assign(this.$data, this.$options.data())
      // this.buttonsPermissions = handlePermissions('期初账户余额录入')
      // this.accountBalancePermissions = handlePermissions('账户信息')
      // 重新设置账套id
      let accountBook = Vue.ls.get(ACCOUNT_BOOK)
      this.accountBookId = accountBook && accountBook.id
      this.defaultColumnData = JSON.parse(JSON.stringify(this.columnData))
      this.selectTitle()
      this.getInitialInventory()
      this.getOpenAccountFlag()
      this.getTreeData()
    },
    // 搜索
    handleSearch () {
      this.currentPage = 1
      this.getInitialInventory()
    },
    // 弹框取消
    onNo (mark) {
      if (mark === 'onChangeStatus') {
        this.newData.forEach((item) => {
          if (item.id == this.rowVal.id) {
            item.status = !item.status
          }
        })
      }
    },
    // 弹框确认
    async onYes (mark) {
      switch (mark) {
        case 'onChangeStatus':
          let param = {
            ids: this.rowVal.id,
            status: this.rowVal.status ? '0' : '1',
          }
          getAction('/xghBank/xghBank/enableOrDisableBatch', param).then((res) => {
            if (res.code === 200) {
              this.getInitialInventory()
            } else {
              this.showTips(res.message, 2)
            }
          })
          break
        case 'isShow':
          this.dialogVisible = false
          break
        case 'onBatchDelete':
          let idArr = []
          this.batchData.forEach((item) => {
            idArr.push(item.id)
          })
          getAction('/xghBank/xghBank/deleteBatch', {
            ids: idArr.toString(),
          }).then((res) => {
            if (res.code == 200) {
              this.showTips(res.message, 0)
              this.getInionSavetialInventory()
            } else {
              this.showTips(res.message, 2)
            }
          })
          break
        case 'onBatchChangeStatus':
          let ids = []
          this.batchData.forEach((item) => {
            ids.push(item.id)
          })
          getAction('/xghBank/xghBank/enableOrDisableBatch', {
            ids: ids.toString(),
            status: this.nowStatus == '启用' ? 0 : 1,
          }).then((res) => {
            if (res.code === 200) {
              this.getInitialInventory()
            }
          })
          break
        case 'onDeleteRow':
          const res = await getAction('/xghBank/xghBank/delete', {
            id: this.rowId,
          })
          if (res.code !== 200) {
            return this.showTips('删除失败！', 2)
          }
          this.showTips('删除成功！', 0)
          this.getInitialInventory()
          break
        case 'onDeleteTree':
          let data = {
            id: this.nowTreeId,
          }
          getAction('/xghbanktype/xghBankType/delete', data).then((res) => {
            if (res.code === 200) {
              this.showTips(res.message, 0)
              if(this.nowTreeId === this.newBankType) {
                this.newBankType = ''
              }
              this.getTreeData()
            } else {
              this.showTips(res.message, 2)
            }
          })
          break
      }
    },
    // 类别信息新增/修改后数据获取
    onSaveTreeChanges () {
      this.getTreeData()
      this.showNewTree = false
    },
    // 获取类别数据
    getTreeData () {
      getAction('/xghbanktype/xghBankType/list', {}).then((res) => {
        if (res.code === 200) {
          let list = res.result
          this.zhlbOptions = list
          let result = getTreeDataByMap(list)
          this.treeData = [{
            id: '',
            typeName: '全部',
            children: result
          }]
          console.log(this.treeData);
        }
      })
    },
    // switch改变
    onChangeStatus (rowVal) {
      this.rowVal = rowVal
      this.tipsData.tipsWords = '是否确认' + (rowVal.status ? '启用' : '禁用') + '?'
      this.tipsData.tipsMark = 'onChangeStatus'
      this.$refs.reminderRef.dialogVisible = true
    },
    // 获取数据
    async getInitialInventory () {
      let params = {
        ...this.queryData,
        pageSize: this.pagesize,
        pageNo: this.currentPage,
      }
      params.showFlag = this.checkboxStatus ? '1' : '0'
      const data = await getAction(this.url.bankList, params)
      if (data.code !== 200) {
        return this.showTips('获取数据失败！', 2)
      }
      let listData = data.result.records || []
      listData.forEach((item) => {
        item.status = item.status == '0' ? true : false
        item.initialBalanceShow = formatMoney(item.initialBalance)
      })
      this.newData = listData
      this.total = data.result.total
    },
    handleBalance (val) {
      val.initialBalance = formatFour(val.initialBalanceShow)
      val.initialBalanceShow = formatMoney(val.initialBalance)
    },
    // 获取每页几条数据
    handleSizeChange (val) {
      this.pagesize = val
      this.getInitialInventory()
    },
    // 获取当前第几页
    handleCurrentChange (val) {
      this.currentPage = val
      this.getInitialInventory()
    },
    // 触发树形当前节点
    handleNodeClick (data) {
      if (this.editTreeDataSta) {
        this.queryData.bankType = data.id
        this.newBankType = data.id
        this.getInitialInventory()
      } else {
        this.newBankType = ''
        this.nowLabel = data.id
      }
    },
    // 触发列配置弹框
    onShowColumn () {
      this.defaultColumnData = this.$options.data().columnData
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 转换拼音码
    getNameToPinying (event) {
      this.ruleForm.helpCode = this.$pinyin.getJp(event.target.value)
    },
    // 触发表格修改按钮
    onEditRow (val) {
      this.dialogVisible = !this.dialogVisible
      this.ruleForm = val
      this.biaoshi = 2
    },
    // 新增/修改数据（新增后序号问题未处理）
    async onSubmit () {
      if (!this.ruleForm.bankName || !this.ruleForm.bankType) {
        return this.showTips('名称或者类别不能为空！')
      }
      // 默认账户 0-非默认 1-默认
      this.ruleForm.defaultFlag = this.ruleForm.defaultFlag ? 1 : 0

      if (this.biaoshi === 1) {
        const res = await postAction('/xghBank/xghBank/add', this.ruleForm)
        if (res.code !== 200) {
          return this.showTips('数据添加失败！', 2)
        }
        this.dialogVisible = !this.dialogVisible
        this.getInitialInventory()
        this.showTips('添加数据成功！', 0)
      } else if (this.biaoshi === 2) {
        delete this.ruleForm.status
        const res = await putAction('/xghBank/xghBank/edit', this.ruleForm)
        this.biaoshi = 1
        this.dialogVisible = !this.dialogVisible
        if (res.code !== 200) {
          this.showTips('修改失败！', 2)
        }
        this.showTips('修改成功！', 0)
        this.getInitialInventory()
      }
    },
    // 触发新增数据按钮
    onShowAdd () {
      this.dialogVisible = !this.dialogVisible
      this.ruleForm.bankType = this.newBankType
    },
    // 触发表格多选按钮
    handleSelectionChange (val) {
      this.batchData = val
    },
    // 点击修改价格
    onClickTable (row) {
      if (this.batchData.indexOf(row) === -1) {
        this.$refs.tableRef.toggleRowSelection(row)
      }
    },
    // 触发启用禁用按钮
    searchSelect (val) {
      if (this.batchData.length) {
        this.batchData.forEach((value) => {
          this.newData.forEach((v, i) => {
            if (value.id == v.id) {
              this.newData[i].state = val
            }
          })
        })
        this.newData = this.newData
      }
    },
    // 删除当前行
    onDeleteRow (row) {
      this.rowId = row.id
      this.tipsData.tipsState = 'delete'
      this.tipsData.tipsWords = '是否确认删除吗?'
      this.tipsData.tipsMark = 'onDeleteRow'
      this.$refs.reminderRef.dialogVisible = true
    },
    // 批量删除
    onBatchDelete () {
      if (this.batchData.length) {
        this.tipsData.tipsState = 'delete'
        this.tipsData.tipsWords = '是否确认批量删除?'
        this.tipsData.tipsMark = 'onBatchDelete'
        this.$refs.reminderRef.dialogVisible = true
      } else {
        this.showTips('请先选择需要删除的数据！')
      }
    },
    // 导入数据
    importExcel () {
      this.$refs.daoru.dialogVisible = true
    },
    importData (val) {
      this.tipsData.tipsWords = '导入成功！'
      this.$refs.successRef.dialogVisible = true
      this.getData()
    },
    // 导出数据
    exportExcel () {
      // let list = []
      // if (this.batchData && this.batchData.length > 0) {
      //   for (let index = 0; index < this.batchData.length; index++) {
      //     const element = this.batchData[index]
      //     list.push(element.id)
      //   }
      // } else {
      //   this.showTips('请选择想要导出的数据！')
      //   return
      // }
      let queryParam = {
        fileName: '期初账户余额',
        // selections: list.join(','),
      }
      this.handleExportXlsByStaff('期初账户余额', queryParam)
    },
    // 保存数据
    onSave () {
      if (this.batchData.length === 0) {
        return this.showTips('请先选择需要修改的账号！', 2)
      }
      let updataBalanceArr = []
      this.batchData.forEach(item => {
        let val = {
          id: item.id,
          initialBalance: delcommafy(item.initialBalance),
          remark: item.remark,
          accountBookId: this.accountBookId,
          xghAccountBookId: this.accountBookId
        }
        updataBalanceArr.push(val)
      })
      let data = JSON.parse(JSON.stringify(updataBalanceArr))
      postAction('/openAccount/enterOpeningBankBalance', data).then((res) => {
        if (res.code === 200) {
          this.showTips(res.message, 0)
          this.getInitialInventory()
          this.getOpenAccountFlag()
        } else {
          this.showTips(res.message, 2)
        }
      })
    },
    // 选中当前行
    onClickRow (row) {
      this.$refs.tableRef.toggleRowSelection(row)
    },
    filterNode (value, data) {
      if (!value) return true
      return data.typeName.indexOf(value) !== -1
    },
    // 触发新增树形节点按钮
    onAddTree (data) {
      this.newTreeData = {
        data: data,
        state: 'add',
        module: {
          name: 'typeName', //类别名称字段
          code: 'typeCode', //类别编码字段
          pyCode: 'pinYinCode', //类别拼音码字段
          indexCode: 'indexCode', //类别排序码字段
        },
        getTreeUrl: '/xghbanktype/xghBankType/list', //获取类别接口
        deleteTreeUrl: '/xghbanktype/xghBankType/delete', //删除类别接口
        addTreeUrl: '/xghbanktype/xghBankType/add', //新增类别接口
        editTreeUrl: '/xghbanktype/xghBankType/edit', //修改类别接口
      }
      this.showNewTree = true
    },
     // 控制输入不能超过限制位数
     inputMoney(key, val) {
      //首位不能输入"."
      val[key] = val[key].replace(/^\./g, '0.')
      val[key] = val[key].replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
      val[key] = val[key].replace(".","$#$").replace(/\./g,"").replace("$#$",".");
      if (this.moneyLength === 2) {
        // 小数点后面保留2位
        val[key] = val[key].replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
      } else {
        // 小数点后面保留4位
        val[key] = val[key].replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3')
      }
    },
    // 合计列计算
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.total + '条明细'
        } else if (column.property === 'initialBalanceShow') {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = formatMoney(sums[index]) // 保留2位小数，解决小数列合计精度缺失的问题
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 触发修改树形节点按钮
    onEditTree (node, data) {
      this.newTreeData = {
        data: data,
        state: 'edit',
        module: {
          name: 'typeName', //类别名称字段
          code: 'typeCode', //类别编码字段
          pyCode: 'pinYinCode', //类别拼音码字段
          indexCode: 'indexCode', //类别排序码字段
        },
        getTreeUrl: '/xghbanktype/xghBankType/list', //获取类别接口
        deleteTreeUrl: '/xghbanktype/xghBankType/delete', //删除类别接口
        addTreeUrl: '/xghbanktype/xghBankType/add', //新增类别接口
        editTreeUrl: '/xghbanktype/xghBankType/edit', //修改类别接口
      }
      this.showNewTree = true
    },
    // 获取期初信息
    getOpenAccountFlag () {
      getAction('/openAccount/getOpenAccountType', {}).then((res) => {
        if (res.code === 200) {
          let val = Number(res.result.value)
          this.$store.commit('SET_OPEN_ACCOUNT_VALUE', val)
          if (val == 3) {
            this.isOpenAccount = false
          } else {
            this.isOpenAccount = true
          }
        }
      })
    },
    // 触发删除树形节点按钮
    onDeleteTree (data) {
      if (data.children && data.children.length) {
        this.$elMessage({
          showClose: true,
          message: '类别下级有分类，不允许删除！',
          type: 'error',
          iconClass: 'el-icon-warning-outline',
          duration: 3000,
        })
      } else {
        this.tipsData.tipsState = 'delete'
        this.tipsData.tipsWords = '是否确认删除?'
        this.tipsData.tipsMark = 'onDeleteTree'
        this.$refs.reminderRef.dialogVisible = true
        this.nowTreeId = data.id
      }
    },
    showTips (msg, type = 1) {
      switch (type) {
        case 0:
          this.$elMessage.success(msg)
          break;
        case 1:
          this.$elMessage.warning(msg)
          break;
        case 2:
          this.$elMessage.error(msg)
          break;
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: calc(100vh - 1.875117rem);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

.info_operation_btn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;

  .el-button {
    width: 70px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 0.1rem;
    border: none;
    margin-right: 6px;
  }

  .el-button--default {
    color: #666;
  }

  .btn_left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    p {
      font-size: 12px;
      color: #666;
      margin: 0 0.1rem 0 0.187512rem;
    }

    ::v-deep .el-checkbox__label {
      font-size: 12px;
      padding-left: 0.1rem;
    }

    ::v-deep .el-select {
      width: 70px;
      height: 30px;
      box-sizing: border-box;
      margin-right: 6px;

      .el-input {
        .el-input__inner {
          height: 30px;
          border: none;
          font-size: 12px;
        }

        .el-input__suffix {
          height: 30px;
          display: flex;
          align-items: center;
        }
      }
    }

    .el-button {
      margin-right: 6px;
      margin-left: 0px;
    }
  }

  .btn_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-input {
      width: 300px;
      height: 30px;
      margin-right: 6px;

      ::v-deep .el-input__inner {
        height: 30px;
        border: none;
        box-sizing: border-box;
        padding: 0 5px;
        background: #fff;
        font-size: 12px;
        color: #666;

        &::placeholder {
          font-size: 12px;
          color: #c1c1c1;
        }
      }
    }

    .el-button {
      width: 70px;
      margin-left: 0;
    }

    .set_up {
      font-size: 23px;
      color: rgb(153, 153, 153);
    }
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 50px);
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
  display: flex;

  .div_tree {
    width: 2.812676rem;
    height: calc(100% - 50px);
    box-sizing: border-box;
    padding: 0.131258rem 0;
    border: 0.018751rem solid #e3e3e3;
    transition: all 0.3s;

    .tree_div1 {
      width: 100%;
      height: 0.337521rem;
      box-sizing: border-box;
      padding: 0 0.168761rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;

      p {
        color: #666666;
        font-size: 12px;

        &:last-child {
          color: #1b93f9;
        }
      }

      .el-button {
        width: 1.012563rem;
        height: 0.375023rem;
        text-align: center;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        border-radius: 0;
        border: none;
      }
    }

    .tree_input {
      width: 100%;
      height: 30px;
      margin-top: 6px;
      box-sizing: border-box;
      padding: 0 0.168761rem;

      p {
        width: 100%;
        height: 30px;
        margin: 0;
        box-sizing: border-box;
        border: 1px solid #dddddd;
        display: flex;
        align-items: center;
        position: relative;

        input {
          width: 100%;
          box-sizing: border-box;
          padding: 0 0.600038rem 0 0.1rem;
          height: 25px;
          border: none;
          font-size: 12px;

          &:focus {
            outline: none;
          }
        }

        span {
          position: absolute;
          right: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 25px;
          height: 25px;
          background: #fff;

          .el-icon-search {
            font-size: 0.31877rem;
            color: rgb(211, 211, 211);
          }
        }
      }
    }

    .tree_structure {
      width: 100%;
      height: calc(100% - 0.337521rem - 0.131258rem - 0.131258rem - 0.55rem);
      box-sizing: border-box;
      padding: 0 0.168761rem;
      margin-top: 0.131258rem;
      overflow: auto;

      ::v-deep .el-tree {
        width: 100%;

        .tree_node {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          span {
            font-size: 12px;
          }

          .show_nodex {
            font-size: 0.25rem;

            i {
              margin-left: 0.15rem;
              font-weight: 600;
            }

            .el-icon-circle-plus-outline {
              color: #1993fb;
            }

            .el-icon-edit-outline {
              color: #1993fb;
            }

            .el-icon-delete {
              color: #ff2626;
            }
          }
        }

        .el-tree-node__children {
          .el-tree-node__label {
            color: #666;
            font-weight: normal;
          }
        }

        .el-tree-node__label {
          font-size: 12px;
          font-weight: 600;
        }

        .is-current {
          .el-tree-node__content {
            background-color: #e6f7ff;
          }
        }

        .el-tree-node__content > .el-tree-node__expand-icon {
          padding-left: 0;
        }
      }
    }
  }

  .new_div_tree_width {
    width: 4.125258rem;
  }

  .div_table {
    width: calc(100% - 3rem);
    height: 100%;
    margin-left: 0.187512rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s;

    .table_content {
      height: calc(100% - 50px);

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        border-bottom: none;
        box-sizing: border-box;

        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          .cell {
            height: 32px;
            display: flex;
            align-items: center;
            font-size: 12px;
            padding: 0;
          }

          &:first-child {
            .cell {
              justify-content: center;
              padding: 0;
            }
          }

          &:nth-child(2) {
            .cell {
              justify-content: center;
            }
          }

          &:last-child {
            .cell {
              justify-content: center;
            }
          }
        }

        th {
          .cell {
            display: block;
            line-height: 30px;
            background: #ededed;
            justify-content: center;
          }
        }

        .el-checkbox {
          .is-indeterminate {
            .el-checkbox__inner {
              color: #1b93f9;
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }
        }

        .el-icon-edit-outline {
          font-size: 20px;
          color: #1b93f9;
          margin-right: 0.037502rem;
        }

        .el-icon-delete {
          font-size: 20px;
          color: #ff2626;
          margin-left: 0.037502rem;
        }

        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }
    .table_pagination {
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      padding: 0.168761rem 0;
      display: flex;

      .pagination_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        ::v-deep .el-pagination {
          padding: 0;
          height: 30px;

          .el-pagination__sizes {
            margin: 0;

            .el-input {
              margin-right: 0;
            }
          }
        }
      }
    }
  }

  .new_div_table_width {
    width: calc(100% - 4.31277rem);
  }
}

.dialog_account ::v-deep .el-dialog {
  .el-dialog__body {
    padding: 0;
  }

  .el-dialog__header {
    width: 100%;
    height: 1rem;
    box-sizing: border-box;
    padding: 0 0.375023rem;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      font-size: 12px;
      color: #666;
      font-weight: 600;
    }

    .el-dialog__headerbtn {
      position: static;

      .el-icon-close {
        color: #999;
        font-size: 0.45rem;
      }
    }
  }
}

.dialog_div_new {
  width: 100%;
  overflow: auto;
  background: #fff;

  .dialog_middle {
    margin-top: 30px;
    padding-bottom: 0;
    box-sizing: border-box;
    padding: 0 0.375023rem;
    overflow: auto;

    div {
      input {
        flex: 1;
        height: 30px;
        background: #ffffff;
        border: 1px solid #e3e3e3;
        border-radius: 0.075005rem;
        font-size: 12px;
        color: #666;
        box-sizing: border-box;
        padding: 0 8px;

        &:focus {
          outline: none;
          border-color: #1890ff;
        }
      }

      ::v-deep .el-select {
        flex: 1;

        .el-input {
          .el-input__inner {
            height: 30px;
            background: #ffffff;
            border: 1px solid #e3e3e3;
            border-radius: 0.075005rem;
            font-size: 12px;
            color: #666;
            box-sizing: border-box;
            padding: 0 8px;
          }

          .el-input__suffix {
            height: 30px;
            display: flex;
            align-items: center;
          }
        }
      }

      ::v-deep .el-checkbox {
        flex: 1;
      }
    }

    .input_line {
      display: flex;
      height: 50px;
      // margin: 5px;

      .line_item {
        width: 50%;
        display: flex;
        padding: 5px 20px;
        align-items: center;

        .title {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 17px;
          color: #666666;
          width: 50px;
          text-align: justify;
          text-justify: distribute-all-lines;
          /*ie6-8*/
          text-align-last: justify;
          /* ie9*/
          -moz-text-align-last: justify;
          /*ff*/
          -webkit-text-align-last: justify;
          /*chrome 20+*/
        }

        .star {
          color: #ff0000;
          margin-left: 10px;
        }
      }
    }
  }

  .dialog_bottom {
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    // padding: 0 0.187512rem;
    display: flex;
    align-items: center;
    justify-content: center;

    ::v-deep .el-button {
      width: 60px;
      height: 30px;
      text-align: center;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      border-radius: 0.1rem;
      background: #fff;
      border: 1px solid #dddddd;
      color: #666666;
    }

    ::v-deep .el-button--primary {
      background: #1890ff;
      border-color: #1890ff;
      color: #fff;
      margin-right: 0.112507rem;
    }

    ::v-deep .el-button--default {
      margin-left: 0.112507rem;
    }
  }
}

.disabled_button {
  background: #cbced3 !important;
  color: #666 !important;
}

.index_input {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;

  input {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: #ffffff;
    border: none;
    color: #666;

    &:focus {
      outline: none;
      border: 1px solid #1b94fb;
    }
  }
}
</style>
